<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>导航的创建(标签)</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
	</head>
	<body>
		<div class="container">
			<ul id="mytab" class="nav nav-tabs" role="tablist">
				<li role="presentation" class="active"><a href="www.baidu.com">Home</a></li>
				<li role="presentation"><a href="#">Active</a></li>
				<li role="presentation"><a href="#">World</a></li>
			</ul>
		</div>
		
		<!--换个样式-->
		<div class="container">            
			<ul id="mytab" class="nav nav-pills" role="tablist">
				<li role="presentation" class="active"><a href="www.baidu.com">Home</a></li>
				<li role="presentation"><a href="#">Active</a></li>
				<li role="presentation"><a href="#">World</a></li>
			</ul>
		</div>
		
		<!--垂直展示-->
		<div class="container">            
			<ul id="mytab" class="nav nav-pills nav-stacked" role="tablist">
				<li role="presentation" class="active"><a href="www.baidu.com">Home</a></li>
				<li role="presentation"><a href="#">Active</a></li>
				<li role="presentation"><a href="#">World</a></li>
			</ul>
		</div>
		
		<!--两端对齐-->
		<div class="container">                 <!--两端对齐-->
			<ul id="mytab" class="nav nav-pills nav-justified" role="tablist">
				<li role="presentation" class="active"><a href="www.baidu.com">Home</a></li>
				<li role="presentation"><a href="#">Active</a></li>
				                               <!--禁用-->
				<li role="presentation" class="disabled"><a href="#">World</a></li>
			</ul>
		</div>
		
		<!--下拉菜单-->
		<div class="container">            
			<ul id="mytab" class="nav nav-pills" role="tablist">
				<li role="presentation" class="active"><a href="www.baidu.com">Home</a></li>
				<li role="presentation"><a href="#">Active</a></li>
				<li role="presentation" class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown">World
						<span class="caret"></span>
					</a>
					<ul class="dropdown-menu" role="menu">
						<li role="presentation"><a href="#" role="menulist" tabindex="-1">hello1</a></li>
						<li role="presentation"><a href="#" role="menulist" tabindex="-1">hello2</a></li>
						<li role="presentation"><a href="#" role="menulist" tabindex="-1">hello3</a></li>
					</ul>
				</li>
			</ul>
		</div>
		
		
		<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	    <script type="text/javascript">
	    	$("#mytab a").click(function(e){
	    		e.preventDefault();/*阻止这个的原本事件发生*/
	    		$(this).tab("show");/*点击的这个tab显示*/
	    	})
	    </script>
	</body>
</html>
